<template>
	<view>
		<text v-if="transForm!='translateY(0)'">哈哈哈</text>
		<view class="regiser" @touchstart="ontouchstart" @touchmove="ontouchmove" @touchend="ontouchend">
			<view class="image">
				<image :src="avatar" mode="" @click="chooseImage"></image>
			</view>
			<view class="input">
				<input type="text" placeholder="用户名" v-model="user_name">
				<input type="email" placeholder="邮箱" v-model="email">
				<input type="text" placeholder="昵称" v-model="nick_name">
				<input type="password" placeholder="密码" v-model="password">
			</view>
			<button @click="submitRegistration">注册</button>
		</view>
	</view>


</template>

<script>
	let avatar = {}
	let ava = {}
	let pointY = 0;
	export default {
		data() {
			return {
				host: this.$params.host,
				nick_name: "",
				user_name: "",
				avatar: "../../static/icons/default_user.png",
				password: "",
				email: "",
				transForm: "translateY(0)",
				transition: ''
			}
		},
		computed: {
			bodyStyle: function() {
				return {
					"transForm": this.transForm,
					"transition": this.transition,
				}
			}
		},
		methods: {
			ontouchstart(e) {
				pointY = e.touches[0].clientY;
			},
			ontouchmove(e) {
				let ditance = e.touches[0].clientY;
				if (ditance > 150) {
					ditance = 150;
				}
				if (ditance < 50) {
					return;
				}
				this.transForm = `translateY(${ditance}rpx)`
			},
			ontouchend(e) {
				this.transForm = `translateY(0)`
				this.transition = `transForm 1000ms linear`
			},
			chooseImage() {
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数
					sizeType: ['original', 'compressed'], // 图片选择的压缩选项
					sourceType: ['album', 'camera'], // 图片选择的来源
					success: res => {
						let filePath = res.tempFilePaths[0]
						console.log(res);
						console.log(this.host);
						this.$request.postFile(this.host + 'api/v1/blogs/upload', 'file', filePath, {},
							res => {
								let pathData = res.data
								avatar = (new Function("return " + pathData))();
								if (avatar.success) {
									ava = avatar.data
									this.avatar = this.host + avatar.data
								}
							})
					}
				});
			},

			// 点击注册按钮时触发该函数
			submitRegistration() {
				if (!this.validateData()) {
					// 校验不通过，直接返回
					return;
				}

				let data = {
					nick_name: this.nick_name,
					user_name: this.user_name,
					avatar: ava,
					password: this.password,
					email: this.email,
				}
				this.$request.post(this.host + 'api/v1/register', data, res => {
					uni.setStorageSync(this.$params.user, res.data)
					this.$notification.postNotification(this.$params.noti_refresh_user, res.data)
					uni.navigateBack({
						delta: 1
					})

				}, () => {}, () => {})
			},

			// 校验注册数据是否合法
			validateData() {
				// 验证用户名是否合法
				const usernamePattern = /^[a-zA-Z]{1}[a-zA-Z0-9_-]{5,15}$/;
				if (!this.user_name || !usernamePattern.test(this.user_name)) {
					uni.showToast({
						title: '用户名必须由英文、数字、下划线或减号组成，且以英文开头，长度为6-16个字符',
						icon: 'none'
					});
					return false;
				}

				// 验证密码是否合法
				const passwordPattern = /^[a-zA-Z0-9_-]{6,16}$/;
				if (!this.password || !passwordPattern.test(this.password)) {
					uni.showToast({
						title: '密码必须由英文、数字、下划线或减号组成，长度为6-16个字符',
						icon: 'none'
					});
					return false;
				}

				// 验证昵称是否为空
				if (!this.nick_name) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return false;
				}

				// 验证邮箱是否合法
				const emailPattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if (!this.email || !emailPattern.test(this.email)) {
					uni.showToast({
						title: '请输入正确的邮箱格式',
						icon: 'none'
					});
					return false;
				}

				// 验证头像是否上传
				if (this.avatar == '../../static/icons/default_user.png') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					});
					return false;
				}

				// 所有校验通过
				return true;
			}


		}
	}
</script>

<style>
	@import url("register.css");
</style>